<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="qu-content">
          <div v-if="quData">
            <p>题目{{ currentIndex + 1 }}</p>
            <div style="margin-bottom:20px">
              <Markdown :value="quData.content" :height="200" :isPreview="true"></Markdown>
              <p v-if="quData.image"><img :src="quData.image"></p>
              <p v-if="quData.video"><video height="400px" controls :src="quData.video"></video></p>
            </div>
            
            <p>选项：</p>
            <el-radio-group v-model="radioValue">
              <el-radio v-for="(item, index) in quData.answerList" :key="index" :label="item.id">
                {{ item.abc }}.{{ item.content }}
                <div v-if="item.image" style="clear: both">
                  <img :src="item.image">
                </div>
              </el-radio>
            </el-radio-group>

            <div v-if="showAnswer" style="margin-top: 20px">
              <p>正确答案：{{ correctAnswer }}</p>
              <p>解析：{{ quData.analysis || '暂无解析' }}</p>
            </div>

            <div style="margin-top: 20px">
              <el-button type="primary" @click="submitAnswer" v-if="!showAnswer">
                确定
              </el-button>
              <el-button type="primary" @click="nextQuestion" v-if="showAnswer && currentIndex < quList.length - 1">
                下一题
              </el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { fetchQucikRequired } from '@/api/paper/exam';
import Markdown from 'vue-meditor'

export default {
  name: 'ResponderQu',
  components: { Markdown },
  data() {
    return {
      currentIndex: 0,
      quList: [],
      quData: null,
      radioValue: '',
      showAnswer: false,
      correctAnswer: ''
    }
  },

  created() {
    this.fetchData({quType:4})
  },

  methods: {
    fetchData(data){
      fetchQucikRequired(data).then(res => {
        if(res.success) {
          this.quList = res.data.quList
          this.loadQuestion()
        }
      })
    },

    loadQuestion() {
      this.quData = this.quList[this.currentIndex]
      this.showAnswer = false
      this.radioValue = ''
    },

    submitAnswer() {
      const correct = this.quData.answerList.find(item => item.isRight)
      this.correctAnswer = `${correct.content}`
      this.showAnswer = true
    },

    nextQuestion() {
      this.currentIndex++
      this.loadQuestion()
    }
  }
}
</script>

<style scoped>
.qu-content {
  padding: 20px;
}

.qu-content div {
  line-height: 30px;
}

.el-radio {
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.el-radio.is-checked {
  border-color: #409eff;
}

.el-radio img {
  max-width: 200px;
  max-height: 200px;
  border: 1px dotted #dcdfe6;
}
</style>